import React from "react";
// 生命周期
class Animation extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
        console.warn('生命周期函数 : constructor')
    }
    // 方法
    add = () => {
        this.setState({
            count: this.state.count + 1
        });
    }
    isLife = () => {
        if (this.state.count > 3) {
            return (
                <div>豆豆被打死了</div>
            )
        }
        else {
            return (
                <div>
                    <Counter count={this.state.count}></Counter>
                </div>
            )
        }
    }
    render() {
        console.warn('生命周期函数 ：render')
        return (
            <div>
                {this.isLife()}
                <button onClick={this.add}>点击打豆豆</button>
            </div>
        )
    }
    componentDidMount() {
        console.warn('生命周期函数 ：componentDidMount  父组件')
    }

}

class Counter extends React.Component {
    render() {
        return (
            <div>
                <h1>打豆豆次数{this.props.count}</h1>
            </div>
        )
    }
    componentDidMount() {
        console.warn('生命周期函数 ：componentDidMount 子组件')
    }
    componentDidUpdate() {
        console.warn('生命周期函数 :componentDidUpdate 子组件')
    }
    componentWillUnmount() {
        console.log('被卸载')
    }

}

export default Animation